<template>
  <div id="mainApp">
    <!-- 增强版侧边栏 -->
    <div class="sidebar-container">
      <el-menu
        class="sidebar"
        :default-active="$route.path"
        @select="handleMenuItemClick"
        :collapse="isCollapse"
      >
        <div class="logo-container" :class="{ 'collapsed-logo': isCollapse }">
          <!-- 侧边栏收起时显示软件图标 -->
          <div class="title-container" @click="toggleCollapse">
            <img :src="appIconSrc" alt="App Icon" width="30" height="30" />
            <h1 v-show="!isCollapse" class="logo-text">自动连点器</h1>
          </div>
        </div>

        <el-menu-item index="/">
          <el-icon>
            <Position />
          </el-icon>
          <span slot="title">鼠标连点</span>
        </el-menu-item>
        <el-menu-item index="/keyboardClick">
          <el-icon>
            <Grid />
          </el-icon>
          <span slot="title">键盘连点</span>
        </el-menu-item>
        <el-menu-item index="/scriptRecording">
          <el-icon>
            <VideoPlay />
          </el-icon>
          <span slot="title">脚本录制</span>
        </el-menu-item>
        <el-menu-item index="/scriptManagement">
          <el-icon>
            <FolderOpened />
          </el-icon>
          <span slot="title">脚本管理</span>
        </el-menu-item>
        <el-menu-item index="/settings">
          <el-icon>
            <Setting />
          </el-icon>
          <span slot="title">系统设置</span>
        </el-menu-item>
      </el-menu>
    </div>

    <!-- 主内容区域 -->
    <el-main class="main-content">
      <el-card shadow="hover" class="content-card">
        <router-view v-slot="{ Component }">
          <transition name="fade-transform" mode="out-in">
            <component :is="Component" />
          </transition>
        </router-view>
      </el-card>
    </el-main>
  </div>
</template>

<script setup>
import {
  Position,
  Grid,
  VideoPlay,
  FolderOpened,
  Setting,
  ArrowLeftBold,
} from '@element-plus/icons-vue'
import { ref, onMounted, onUnmounted, provide } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
// 引入软件图标
import appIcon from '@/assets/icon.png'
import webSocketManager from '@/utils/webSocket.js' // 引入独立模块
const router = useRouter()

// 侧边栏收缩状态
const isCollapse = ref(false)

// 软件图标路径
const appIconSrc = ref(appIcon)

// 切换侧边栏收缩状态
const toggleCollapse = () => {
  isCollapse.value = !isCollapse.value
}

// 节流函数
const throttle = (func, delay) => {
  let lastExec = 0
  return function (...args) {
    const now = Date.now()
    if (now - lastExec < delay) return
    lastExec = now
    return func(...args)
  }
}

// 带节流的菜单点击处理
const handleMenuItemClick = throttle((index) => {
  if (index !== router.currentRoute.value.path) {
    router.push(index)
  }
}, 100) // 100ms 内只允许执行一次

// 应用级生命周期：启动时连接
onMounted(() => {
  webSocketManager.connect() // 调用封装的连接方法
  provide('webSocketManager', webSocketManager) // 提供给子组件使用
  webSocketManager.subscribe('/topic/errors', (status) => {
    // 添加错误监听
    ElMessage.error(status.message)
  })
})

// 应用级生命周期：关闭时断开
onUnmounted(() => {
  webSocketManager.unsubscribe('/topic/errors') // 移除错误监听
  webSocketManager.disconnect() // 调用封装的断开方法
})
</script>

<style lang="less" scoped>
#mainApp {
  height: 100vh;
  width: 100vw;
  display: flex;

  .sidebar-container {
    position: relative;

    .sidebar {
      height: 100vh;

      &:not(.el-menu--collapse) {
        width: 200px;
        min-height: 400px;
      }

      .logo-container {
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        padding: 0 10px;

        &.collapsed-logo {
          justify-content: center;
        }

        .title-container {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 5px;

          .logo-text {
            font-size: 20px;
            margin: 0;
            white-space: nowrap;
            text-overflow: clip;
            overflow: hidden;
          }
        }
      }

      .el-menu-item {
        height: 56px;
        line-height: 56px;
        margin: 4px 0;
      }
    }
  }

  .main-content {
    flex: 1;
    background-color: #f0f2f5;
    padding-left: 20px;

    .content-card {
      min-height: calc(100vh - 100px);
      border-radius: 8px;
    }
  }
}
</style>

<style lang="less">
#app {
  padding: 0px;
  margin: 0px;
}
body {
  padding: 0px;
  margin: 0px;
}
</style>

<style lang="less">
// 全局过渡动画
.fade-transform {
  &-leave-active,
  &-enter-active {
    transition: all 0.3s;
  }

  &-enter-from {
    opacity: 0;
    transform: translateX(-30px);
  }

  &-leave-to {
    opacity: 0;
    transform: translateX(30px);
  }
}

// 全局滚动条美化
&::-webkit-scrollbar {
  width: 6px;
  height: 6px;

  &-thumb {
    background-color: rgba(144, 147, 153, 0.3);
    border-radius: 3px;
  }
}
</style>
